<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>自定义指令</h2>
      <input type="text" v-focus />
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {};
        },
        // 局部创建自定义指令
        // directives表示自定义指令
        // directives: {
        //   // focus表示指令名称
        //   focus: {
        //     // 可以写生命周期，名字和组件的生命周期一样
        //     // el表示加指令的元素
        //     mounted(el) {
        //       // console.log(el);
        //       el.focus();
        //     },
        //   },
        // },
      });

      // 全局自定义指令
      app.directive("focus", {
        // 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。
        mounted(el) {
          // el 就是当前指令对应的DOM节点
          el.focus();
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
